<template>
   
    <!-- 模仿网易云音乐的主内容区域 -->
    <main class="main-content p-8">
      <section class="banner">
        <!-- 轮播图 -->
        <div class="carousel h-96 bg-gray-100 rounded-lg shadow-lg overflow-hidden">
          <!-- 轮播项 -->
          <div class="carousel-item">
            <img class="w-full h-full object-cover" src="https://pic.rmb.bdstatic.com/bjh/240506/dump/f43bf9e85f77a5aff798cfcd872d96c2.jpeg" alt="Banner 1">
          </div>
          <div class="carousel-item">
            <img class="w-full h-full object-cover" src="https://pic.rmb.bdstatic.com/bjh/240506/dump/f43bf9e85f77a5aff798cfcd872d96c2.jpeg" alt="Banner 2">
          </div>
        </div>
      </section>
      <section class="recommended-music">
        <h2 class="text-2xl text-gray-800 mb-5">推荐歌单</h2>
        <!-- 这里是推荐歌单的内容 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div v-for="item in getItems" :key="item.id" class="bg-white rounded-lg shadow-md overflow-hidden">
            <NuxtLink :to="`music-player/${item.id}`">
              <img class="w-full h-48 object-cover" :src="item.image" alt="Song Image">
              <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800">{{ item.title }}</h3>
                <p class="text-gray-600">{{ item.description }}</p>
              </div>
            </NuxtLink>
          </div>
        </div>
      </section>
    </main>
    <!-- 模仿网易云音乐的底部 -->
</template>

<script setup lang="ts">

interface MusicItem {
  // 这里根据实际返回的数据结构定义属性
  id: number;
  name: string;
  image: string;
  description: string;
  title: string;
  // 可按需添加更多属性
}

  // 传递分页参数（示例：第1页，每页10条）
  const { data: items } = await useFetch<MusicItem[]>('/api/music-list', {
    query: { page: 1, pageSize: 10 }
  });

  const getItems = computed(() => {
    return items.value || []
  })
</script>

<style scoped>
/* 移除原有的内联样式 */
</style>